<script setup>
import { ref, reactive, computed } from 'vue';
import { ElMessage } from 'element-plus';
import { ElUpload } from 'element-plus';
import { ElOption } from "element-plus";

// 申请阶段管理
const currentStep = ref(1);
const steps = [1, 2, 3, 4, 5, 6, 7, 8];

// 证件照上传
const photoFile = ref(null);
const handlePhotoUpload = (e) => {
  const file = e.target.files[0];
  if (file) {
    photoFile.value = URL.createObjectURL(file);
  }
};

// 简历完成度计算
const completionRate = computed(() => {
  return Math.min(currentStep.value * 12.5, 100);
});

// 基本信息表单
const baseInfo = reactive({
  name: '',
  gender: '',
  age: '',
  birthday: '',
  position: '',
  healthStatus: ''
});

// 家庭成员管理
const familyMembers = ref([]);
const newMember = reactive({
  relation: '',
  name: '',
  birthday: '',
  political: ''
});

// 科研成果管理
const papers = ref([]);
const newPaper = reactive({
  authors: '',
  title: '',
  journal: '',
  date: ''
});
const showPaperDialog = ref(false);

// 职称选项
const positions = [
  {
    value: '高等学校教师',
    children: [
      { value: '教授' },
      { value: '副教授' },
      { value: '讲师' }
    ]
  },
  {
    value: '辅导员',
    children: [
      { value: '正处级辅导员' },
      { value: '副处级辅导员' }
    ]
  }
];

// 健康状况选项
const healthOptions = [
  { value: '健康' },
  {
    value: '有慢性病',
    children: [
      { value: '心血管病' },
      { value: '糖尿病' }
    ]
  }
];

// 学习工作经历
const studyFiles = ref([]);
const workFiles = ref([]);

// 家庭成员操作
const addMember = () => {
  familyMembers.value.push({ ...newMember });
  Object.keys(newMember).forEach(key => newMember[key] = '');
};

const removeMember = (index) => {
  familyMembers.value.splice(index, 1);
};

// 科研成果操作
const addPaper = () => {
  papers.value.push({ ...newPaper });
  Object.keys(newPaper).forEach(key => newPaper[key] = '');
  showPaperDialog.value = false;
};

const editPaper = (index) => {
  newPaper.value = { ...papers.value[index] };
  showPaperDialog.value = true;
};

const removePaper = (index) => {
  papers.value.splice(index, 1);
};

// 其他表单数据
const rewardText = ref('');
const otherText = ref('');
const coverLetter = ref('');
const proofFiles = ref([]);

// 分步操作
const prevStep = () => currentStep.value--;
const nextStep = () => currentStep.value++;
const submitForm = () => {
  ElMessage.success('申请提交成功');
};
</script>

<template>
  <div class="container">
    <div class="breadcrumb">
      <router-link to="/index/jobs" class="link-style">招聘岗位</router-link>
      <router-link to="/index/jobDetail" class="link-style"> > 详情</router-link>
      <span> > 岗位申请</span>
    </div>

    <!-- 内容面板 -->
    <div class="content-panel">
      <!-- 左侧表单区域 -->
      <div class="form-container">
        <!-- 阶段进度条 -->
        <div class="step-bar">
          <div
              v-for="step in steps"
              :key="step"
              :class="['step', { active: step <= currentStep }]"
          ></div>
        </div>

        <!-- 已选岗位 -->
        <div class="selected-job">
          <span class="label">已选岗位：</span>
          <span class="value">教学科研岗（计算机科学学院）</span>
        </div>

        <!-- 第一阶段 -->
        <div class="form-section" v-show="currentStep === 1">
          <div class="section-title">
            <div class="blue-line"></div>
            第一阶段 基本信息
          </div>
          <div class="form-content">
            <div class="form-row">
              <div class="form-item">
                <label>姓名</label>
                <el-input v-model="baseInfo.name" />
              </div>
              <div class="form-item">
                <label>性别</label>
                <el-select v-model="baseInfo.gender">
                  <el-option label="男" value="男" />
                  <el-option label="女" value="女" />
                </el-select>
              </div>
            </div>
            <!-- 其他字段类似 -->
            <div class="form-row">
              <div class="form-item">
                <label>现职称</label>
                <el-cascader :options="positions" />
              </div>
              <div class="form-item">
                <label>健康状况</label>
                <el-cascader :options="healthOptions" />
              </div>
            </div>
          </div>
        </div>

        <!-- 第二阶段 -->
        <div class="form-section" v-show="currentStep === 2">
          <div class="subsection">
            <div class="sub-title">
              <div class="small-blue-line"></div>
              主要学习经历
            </div>
            <el-upload action="#" :file-list="studyFiles">
              <el-button type="primary" icon="plus">上传学习经历证明</el-button>
            </el-upload>
          </div>
          <!-- 工作经历和博士后信息类似 -->
        </div>

        <!-- 第三阶段 -->
        <div class="form-section" v-show="currentStep === 3">
          <div class="member-list">
            <div v-for="(member, index) in familyMembers" :key="index" class="member-item">
              <div class="form-row">
                <el-input v-model="member.relation" placeholder="家庭关系" />
                <el-input v-model="member.name" placeholder="姓名" />
              </div>
              <div class="action-buttons">
                <el-button type="primary" @click="saveMember(index)">保存</el-button>
                <el-button type="danger" @click="removeMember(index)">删除</el-button>
              </div>
            </div>
            <el-button @click="addMember">新增家庭成员</el-button>
          </div>
        </div>

        <!-- 第四阶段 -->
        <div class="form-section" v-show="currentStep === 4">
          <el-input
              v-model="rewardText"
              type="textarea"
              :rows="8"
              maxlength="40000"
              show-word-limit
          />
        </div>

        <!-- 第五阶段 -->
        <div class="form-section" v-show="currentStep === 5">
          <el-dialog v-model="showPaperDialog">
            <!-- 论文表单 -->
          </el-dialog>
          <el-table :data="papers">
            <el-table-column prop="authors" label="所有作者" />
            <!-- 其他列 -->
            <el-table-column label="操作">
              <template #default="{ $index }">
                <el-button @click="editPaper($index)">编辑</el-button>
                <el-button @click="removePaper($index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button @click="showPaperDialog = true">新增论文</el-button>
        </div>

        <!-- 第六到第八阶段类似 -->
      </div>

      <!-- 右侧信息栏 -->
      <div class="sidebar">
        <!-- 证件照上传 -->
        <div class="photo-upload">
          <label class="upload-label">
            <input type="file" accept="image/*" @change="handlePhotoUpload">
            <img v-if="photoFile" :src="photoFile" alt="证件照">
            <span v-else>点击上传证件照</span>
          </label>
        </div>

        <!-- 简历完成度 -->
        <div class="progress-box">
          <div class="progress-header">
            <span>简历完成度</span>
            <span>{{ completionRate }}%</span>
          </div>
          <div class="progress-bar">
            <div class="progress" :style="{ width: completionRate + '%' }"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <button v-if="currentStep > 1" @click="prevStep">上一步</button>
      <button v-if="currentStep < 8" @click="nextStep">保存并下一步</button>
      <button v-else @click="submitForm">提交申请</button>
    </div>
  </div>
</template>

<style scoped>
.container {
  min-height: 100vh;
  background-color: #f8fafc;
  padding: 40px 0;
}

.breadcrumb {
  width: 70%;
  margin: 0 auto 20px;
  color: #666;
  font-size: 14px;
}

.content-panel {
  background: white;
  width: 70%;
  margin: 0 auto;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  position: relative;
}

.link-style {
  color: #3b82f6;
  cursor: pointer;
  text-decoration: none;
}

.link-style:hover {
  text-decoration: underline;
}

.content-panel {
  display: flex;
  gap: 30px;
}

.form-container {
  flex: 1;
}

.sidebar {
  width: 280px;
}

/* 证件照上传样式 */
.photo-upload {
  border: 2px dashed #ddd;
  border-radius: 8px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* 进度条样式 */
.progress-bar {
  height: 8px;
  background: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
}

.progress {
  height: 100%;
  background: #3b82f6;
  transition: width 0.3s;
}

/* 分步进度条 */
.step-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 30px;
}

.step {
  flex: 1;
  height: 4px;
  background: #e0e0e0;
  border-radius: 2px;
}

.step.active {
  background: #3b82f6;
}

/* 表单区块样式 */
.form-section {
  margin-bottom: 40px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  font-size: 16px;
  color: #1e3a8a;
}

.blue-line {
  width: 4px;
  height: 20px;
  background: #3b82f6;
  margin-right: 10px;
}

/* 操作按钮 */
.action-buttons {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 20px;
}

button {
  padding: 12px 30px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background: #3b82f6;
  color: white;
}

button:hover {
  background: #2563eb;
}

/* 响应式设计 */
/*@media (max-width: 768px) {
  .content-panel {
    width: 85%;
    padding: 20px;
  }

  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .meta-info {
    flex-direction: column;
    gap: 10px;
  }

  .info-table td {
    display: block;
    width: 100%;
    border: none;
    border-bottom: 1px solid #e2e8f0;
  }

  .label {
    background: #f8fafc;
    font-weight: 600;
  }
}*/
</style>